<%@ page language="java" contentType="text/html; charset=UTF-8" session="true"
    pageEncoding="UTF-8"%>
   	<script type="text/javascript" src="lib/dtable/jquery.dataTables.js"></script>
   	<script type="text/javascript">
   	$(function() {
   		var TablaModificar;
   		var m_idinsumo=$("#m_idinsumo"),m_nominsumo=$("#m_nominsumo"),m_codigo=$("#m_codigo"),m_descripcion=$("#m_descripcion"),frmMod=$("#formulario-modificar-insumo"),
		allMod= $([]).add(m_idinsumo).add(m_nominsumo).add(m_codigo).add(m_descripcion);
	$("button").button();
	
	function MensajeError(tip,campo,mensaje){
		campo.addClass( "ui-state-error" );
		$('.'+tip).addClass( "ui-state-highlight" );
		$('.'+tip).html( mensaje );
	}
	
	function MandarModificacion(Datos){
		$.ajax({
			  url: "CModificarInsumo",
			  data:Datos, 
			  type: 'post',
			  dataType: 'json',
			  success: function(data){
				  //todo se realizo con éxito
				  if(data.resultado=="10"){
					  DialogoInformacionDiv('mod-ins','Datos modificados','Datos guardados con éxito');	
					  frmMod.dialog("close");
					  CrearTabla();//recargamos la tabla
				  }else{//error
				  		MensajeError('tipsModInsumo',$("#"+data.campo),data.mensaje);
				  	}
		  	}  
			});		
						
	}
	
	/*formulario*/
	frmMod.dialog({
		autoOpen:false,
		height: 'auto',
		width: 'auto',
		modal:true,
		closeOnEscape:true,
		buttons:{
			"Cancelar": function(){
				$(this).dialog('close');
			},
			"Guardar cambios": function(){
				MandarModificacion(
					{
						idinsumo:m_idinsumo.val(),
						new_nominsumo:m_nominsumo.val(),
						new_codigo:m_codigo.val(),
						new_descripcion:m_descripcion.val()
					}		
				);
			}
		}
	});
	
	
			//evento boton deshabilitar
		//columna especifica y obe  1-n
		//evento boton editar solamente los datos 
		$("#tabla1 tbody tr td:nth-child(1) button").live("click", function () {
			
			allMod.val('');
			allMod.removeClass('ui-state-error');
			$('.tipsModInsumo').html('* Campos obligatorios');
			$('.tipsModInsumo').removeClass('ui-state-highlight');
			
			/*Datos de la tabla*/
			/*var aPos = TablaModificar.fnGetPosition( this );
		    var aData = TablaModificar.fnGetData( aPos[0] );*/
		  	
		    var nTr = $(this).parents('tr')[0];
  			var aData = TablaModificar.fnGetData( nTr );
  			
  			
		  	/*Se cargan los datos originales*/
		  	m_idinsumo.val(aData[1+1]);
			m_nominsumo.val(aData[2+1]);
			m_codigo.val(aData[3+1]);
			m_descripcion.val(aData[4+1]);
		
			frmMod.dialog({position:'center'});
			frmMod.dialog({show:'fade'});
			frmMod.dialog({hide:'fade'});
			frmMod.dialog('open');
			m_nominsumo.focus();
			
	});
	
	//div_id recibe el nombre de lo datos
	
	function DoTable(div_id,nombre_tabla,columnas,Data){
   		$('#'+div_id).html( '<table cellpadding="0" cellspacing="0" border="1" class="display" id="'+nombre_tabla+'" width="100%"></table>' );
   		TablaModificar=$('#'+nombre_tabla).dataTable( {
				"aaData": Data,
				"bJQueryUI": true,
				"iDisplayLength":10,
				"sSingle":true,
				"bAutoWidth": false,
				"oLanguage": {
					"sSearch":"Buscar:",
					"sLengthMenu": "Mostrar _MENU_ registros por página",
					"sZeroRecords": "No se han encontrado elementos",
					"sInfo": "Mostrando registros: _START_ / _END_",
					"sInfoEmpty": "Mostrando 0 de 0 de 0 registros",
					"sInfoFiltered": "(Registros con el filtro aplicado: _MAX_)"
					,'oPaginate': {
						'sPrevious': 'página previa','sNext': '>','sPrevious':'<','sFirst':'primera','sLast':'ultima'}
				},	"aoColumns": columnas
				,sPaginationType: 'full_numbers'
			} );
   	}
	
	/*Click para modificar insumo*/
	function CrearTabla(){
		  var columna=[
		  		     {"sTitle":"","sWidth": '4%',"sHeight":'2%'},
		  		   	 {"sTitle":"","sWidth": '4%',"sHeight":'2%'},
		  			 {"sTitle":"id","sClass": "center","sWidth": '4%',"sHeight":'2%'},
		  			 {"sTitle": "Nombre de insumo","sClass": "center" ,"sHeight":'2%'},
		  			 {"sTitle": "Código","sClass": "center" ,"sHeight":'2%'},
		  			 {"sTitle": "Descripción","sClass": "center" ,"sHeight":'2%'},
		  			 {"sTitle": "Existencias","sClass": "center" ,"sHeight":'2%'},
		  			 ];

		$.ajax({
			  url: "CConsultaInsumo",
			  data:'tipo=ListaInsumoArea', 
			  type: 'post',
			  dataType: 'json',
			  success: function(data){
				  DoTable('divTabla','tabla1',columna,data.aDataSet);
			  }  
			});
	
	}
	/*Modificar Insumo*/
	$("#cargar_lista_insumo").click(function(){
		CrearTabla();
	
	});
   	
	
	/*Eliminar insumo*/
	$("#tabla1 tbody tr td:nth-child(2) button").live("click", function () {
		
			var nTr = $(this).parents('tr')[0];
			var aData = TablaModificar.fnGetData( nTr );
			$('#preguntaEliminar').html('<h3 style=\"color:red;\">¿Desea eliminar este insumo?: '+aData[3]+'</h3><h3 style=\"text-align:center;\" >¡Esta operación no se puede deshacer!</h3>');
			$("#preguntaEliminar").attr('title','¿Desea eliminar?').dialog
  			({	position:'center'
  				,show:'fade'
  				,hide:'fade'
  				,width: 'auto'
  				,buttons:{
  					'Cancelar':function(){$(this).dialog('close');},
  					'Eliminar':function(){
  						$(this).dialog('close');
  						$.ajax({
  						  url: "CConsultaInsumo",
  						  data:'tipo=Eliminar&idinsumo='+aData[2], 
  						  type: 'post',
  						  dataType: 'json',
  						  success: function(data){
  							DialogoInformacionDiv('mod-ins','Elemento eliminado','Eliminación realizada con éxito');
  							CrearTabla();
  						  }  
  						});
  					}
  				}
  			});//centrar el formulario
		
	});
	
	
   	});
   	</script>

		
	<div id="mod-ins" title=""></div> 
   			
	<button id="cargar_lista_insumo">Cargar lista de insumos</button>
	<br><br>
	<div id="divTabla">
	
	</div>
			 
		<div id="formulario-modificar-insumo" title="Modificar datos de insumo">
		<h3 style="text-align:center" class="tipsModInsumo">* Campos obligatorios</h3>
		<table class="formulario">
		
		<tr>
			<td>*</td>
			<td class="ui-widget">Id:</td>
			<td class="ui-state-focus"><input id="m_idinsumo" size="15" readonly="readonly"/> </td>			
		</tr>
		
		<tr>
			<td>*</td>
			<td class="ui-widget">Nombre:</td>
			<td class=""><input id="m_nominsumo" size="99"/> </td>			
		</tr>
		
		<tr>
			<td></td>
			<td class="ui-widget">Código</td>
			<td class="ui-state-focus"><input id="m_codigo" size="40"/> </td>
		</tr>
		
		<tr>
			<td></td>
			<td class="ui-widget">Descripción:</td>
			<td class="ui-state-focus"><input id="m_descripcion" size="80"/> </td>			
		</tr>
		</table>
		
		</div>
   			
   			
   		<div id='preguntaEliminar' title=''></div>	
   			